<template>
    <div style="background-color: #F5F5F5;width: 100%;height: 100%!important;">
        <!--        背景图-->


        <div style="width: 1299px;margin: 30px auto;display: flex;justify-content: center">
            <div class="left">      <!--            <span class="demonstration">Click 指示器触发</span>-->

                <el-carousel :interval="2000" trigger="click" style="width: 638px" height="300px">
                    <el-carousel-item v-for="item in swiperList" :key="item.swiperImg">
                        <h3 class="small">
                            <el-image
                                    :preview-src-list="[item.swiperImg]"
                                    style="width: 638px; height: 100%"
                                    :src="item.swiperImg"
                            ></el-image>
                            <!--                        <img src="https://img.alicdn.com/imgextra/i3/6000000003360/O1CN01JVYA861agvUF417fB_!!6000000003360-0-octopus.jpg">-->
                        </h3>
                    </el-carousel-item>
                </el-carousel>
                <div style="text-align: right;margin-top: 10px">
                    <div style="margin-right: 10px">
                        <el-button size="mini" @click="sort(1)">综合</el-button>
                        <el-button size="mini" @click="sort(2)">最新</el-button>
                        <el-button size="mini" @click="sort(3)">热门</el-button>
                    </div>
                </div>
                <el-card v-for="(item,index) in blogList" class="el-card-body">
                    <div class="el-card-header">
                        <a class="atitle" style="font-size: 16px;color: #303133;font-weight: 200;cursor: pointer"
                           @click="toDetail(item.id)">{{item.title}}</a>
                        <span style="color:#A6A6BA;font-size: 12px ">                        <i
                                class="el-icon-view"></i>{{item.views}}</span>
                    </div>
                    <div class="el-card-describe" style="font-size: 15px">{{item.description}}</div>
                    <div class="el-card-footer">
                        <span style="font-size: 12px;color: #A6A6AE">{{item.nickname}}</span>
                        <div>
                            <el-tag v-for="item2 in item.tagList" style="margin-right: 10px" size="mini">{{item2}}
                            </el-tag>
                        </div>
                        <span class="time"><i class="el-icon-time"></i> {{item.formatTime}}</span>
                    </div>
                </el-card>


                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[1,10,20]"
                        :page-size="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <!--        首页的右侧部分 -->
            <div class="right">
                <!--            自我介绍-->
                <el-card class="myself"><h1
                        style="border-bottom: 1px solid #78B6F7;text-align: center;padding-bottom: 5px;font-size: 18px">
                    {{custom.customHead}}
                </h1>
                    <div class="description" style="display: flex;justify-content: space-around;margin-top: 5px">
                        <i class="el-icon-location-outline"></i>
                        <span style="font-size: 15px">      {{custom.customLocation}}
</span>
                        <span style="font-size: 15px"> {{custom.customName}}</span>
                    </div>
                    <div class="icon" style="margin-top: 40px;margin-left: 100px;font-size: 30px"><i
                            class="el-icon-chat-round" style="margin-right: 8px"></i><i class="el-icon-moon"></i></div>
                </el-card>
                <!--            广告时间-->
                <el-card class="advertisement">

                    <div style="padding-bottom: 5px">
                        <h1 style="border-bottom: 1px solid #78B6F7;padding-bottom: 5px;font-size: 18px">站长推荐</h1>
                    </div>
                    <div>
                        <el-image
                                :preview-src-list="[custom.customAdverImg]"
                                style="width: 180px; height: 180px"
                                :src="custom.customAdverImg"
                        ></el-image>
                    </div>
                    <div class="miaoshu">
                        <p>{{custom.customAdverBody}}</p>
                    </div>
                </el-card>
                <!--                最新文章-->
                <el-card class="newAritle">
                    <div>
                        <h1 style="border-bottom: 1px solid #78B6F7;padding-bottom: 5px;font-size: 18px">最新文章</h1>
                    </div>
                    <div class="newlink" style="color:#78B6F7">
                        <p v-for="item in latestBlog" style="margin-bottom: 6px"><a @click="toDetail(item.id)"
                                                                                    style="cursor: pointer">{{item.title}}</a>
                        </p>
                        <!--                        <p style="margin-bottom: 6px"><a href="#">Redis的持久化机制</a></p>-->
                        <!--                        <p style="margin-bottom: 6px"><a href="#">Redis的持久化机制</a></p>-->
                        <!--                        <p style="margin-bottom: 6px"><a href="#">Redis的持久化机制</a></p>-->
                        <!--                        <p style="margin-bottom: 6px"><a href="#">Redis的持久化机制</a></p>-->


                    </div>
                </el-card>
                {{keyWords}}
                <!--            文章归档-->
                <el-card class="guidang">
                    <div>
                        <h1 style="border-bottom: 1px solid #78B6F7;padding-bottom: 5px;font-size: 18px">文章归档</h1>

                    </div>
                    <div class="riqi" style="display: flex;flex-wrap: wrap;justify-content: space-around">
                        <span v-for="item in countBlog"><a style="cursor: pointer"
                                                           @click="toArichive(item.createTime)">{{item.year}}年{{item.month}}月({{item.count}})</a></span>


                    </div>
                    <div>

                    </div>
                </el-card>
            </div>

        </div>
    </div>
</template>

<script>
    import {formatDate} from '@/assets/js/Time';
    // import Global from "../assets/js/Global";
    import jwtDecode from "jwt-decode";
    import Global from "../../public/static/Global";

    export default {
        name: "Index",
        props: {    // 从父组件leyout中获取搜索框的值
            keyWords: {
                default: ''
            }
        }
        ,
        methods: {


            async getLatestBlog() {
                const {data: res} = await this.$http.get('/blog/index/latestblog')
                // console.log(res);
                this.latestBlog = res.data;
            }
            ,
            async selectBlogAuthorById(num) {   // 博客查询方法
                console.log(this.keyWords)
                // console.log(num)
                // console.log(this.keyWords)
                // console.log(this.keyWords)

                const {data: res} = await this.$http.get('/blog/index/search?keyWords=' + this.keyWords + '&index=' + this.currentPage4 + '&size=' + this.size + '&num=' + num)
                // this.$message.success(res);
                // console.log(res);
                // let newdata = JSON.parse(JSON.stringify(res.data))
                this.blogList = res.data.blogList;
                this.total = res.data.total;
                // this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'小红'
                // vm.$forceUpdate()

                // this.$set
            }
            ,
            async getBlogList(num) {
                if (!num) {  // 如果num为空，那就默认按照 综合排序
                    num = 1;
                }
                // this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'小红'
                // this.blogList=[]; // 调用之前先清空
                const {data: res} = await this.$http.get('/blog/index/list?index=' + this.currentPage4 + '&size=' + this.size + '&num=' + num)
                console.log(res);

                this.blogList = res.data.blogList;
                this.total = res.data.total;
                // this.$set(this.blogList[0], 'tt', 11);
                this.$nextTick(() => {
                    this.$forceUpdate();

                })
            },
            handleSizeChange(size) {
                this.size = size;
                // console.log()
                // console.log(this)
                // console.log(this.$props);
                // console.log(this.$props.keyWords);
                let keyWords = this.$props.keyWords;
                // this.blogList=[]; // 调用之前先清空
                if (!keyWords) {// 如果是空的
                    this.getBlogList();
                }
                this.selectBlogAuthorById()
                // this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'小红'
            },
            handleCurrentChange(index) {
                this.currentPage4 = index;
                // console.log(index);
                let keyWords = this.$props.keyWords;
                // console.log('key')
                // console.log(keyWords)
                // this.blogList=[]; // 调用之前先清空

                if (!keyWords) {// 如果是空的
                    this.getBlogList();

                }
                this.selectBlogAuthorById()
                // this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'小红'
                // vm.$forceUpdate()
            },
            // toDetail(id) {
            //     // console.log(id);
            // },
            async getCountBlog() {
                const {data: res} = await this.$http.get('/blog/index/countblog')
                // console.log(res);
                this.countBlog = res.data;
            },
            async getcustomInfo() {
                const {data: res} = await this.$http.get('/blog/index/custom')
                // console.log(res);
                this.custom = res.data;
                this.custom.customAdverImg = Global.baseUrl + this.custom.customAdverImg;
                // this.custom.create

            },
            async getSwiperInfo() {
                const {data: res} = await this.$http.get('/blog/index/swiper')

                // console.log(res);

                for (let i = 0; i < res.data.length; i++) {
                    res.data[i].swiperImg = Global.baseUrl + res.data[i].swiperImg;
                }
                this.swiperList = res.data;
                // console.log(this.swiperList)
            },
            toDetail(id) { // 去详情页
                // console.log(id);
                this.$router.push({
                    name: 'Detail',
                    query: {
                        id: id
                    }
                })
            },
            toArichive(createTime) {  // 去归档页
                this.$router.push({
                    name: 'Archive',
                    query: {
                        createTime: createTime
                    }
                })
            },
            sort(num) {// 排序
                console.log(num)
                //     1 是综合 2 是最新  3是热门
                let keyWords = this.$props.keyWords;
                // console.log('key')

                console.log(keyWords)
                // this.blogList=[]; // 调用之前先清空

                if (!keyWords) {// 如果是空的
                    // for (let i = 0; i < 2; i++) {
                    this.getBlogList(num);
                    return;
                    // }

                }
                // for (let i = 0; i < 2; i++) {

                this.selectBlogAuthorById(num)
                // }

            },

        },
        data() {
            return {

                srcList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ],
                img: [
                    {
                        url: './assets/轮播03.jpg'
                    },
                    {
                        url: '../assets/轮播01_.webp.jpg'
                    },
                    {
                        url: './assets/轮播02.webp.jpg'
                    }
                ],
                currentPage4: 1,
                size: 10,
                total: 10,
                blogList: [
                    // {
                    //     collection: 0,
                    //     count: 0,
                    //     createTime: 0,
                    //     description: "",
                    //     formatTime: "",
                    //     id: 0,
                    //     nickname: "",
                    //     tagList: [],
                    //     thumbs: 0,
                    //     title: "",
                    //     views: 0
                    // }
                ],
                latestBlog: [],  // 最新的博客
                countBlog: [],  // 博客归档数据
                custom: {}, // 首页自定义数据
                swiperList: [],  // 首页轮播图数据

            }
        },
        created() {
            this.getBlogList();
            this.getLatestBlog();
            this.getCountBlog();
            this.getcustomInfo();
            this.getSwiperInfo();
            this.$nextTick(() => {
                this.$forceUpdate();

            })
        }
    }
</script>

<style lang="less" scoped>

    .el-card-header {
        a {
            text-decoration: none;
            /*color: ;*/
        }

        a:hover {
            color: #ECF5FF;
        }
    }

    a:hover {
        color: #40A1FF !important;
        /*background-color: pink!important;*/

    }

    .head {
        width: 100%;
        /*min-width: 1300px;*/
        /*background-color: pink;*/
        height: 61px;

    }

    .el-card-body {
        box-sizing: border-box;
        margin-top: 10px;
        width: 638px;
        /*112*/
        height: 115px;
        transition: all 0.4s;
    }

    .el-card-body:hover {
        transform: scale(0.9);
        box-shadow: 0px 5px 10px 3px #D1D1D1;

    }

    .el-card-header {
        display: flex;
        justify-content: space-between;
    }

    .el-card-footer {
        margin-top: 10px;
        /*margin-right: ;*/
        display: flex;
        justify-content: space-between;

    }

    .el-card-describe {
        margin-top: 10px;
    }

    .time {
        font-size: 12px;
        color: #A6A6BA;
    }

    /*右侧部分布局    */
    .right {
        margin-left: 35px;

        .myself {
            width: 298px;
            height: 180.6px;
            transition: all 0.4s;
        }

        .myself:hover {
            box-shadow: 0px 5px 35px 3px #D1D1D1;

        }
    }

    .advertisement {
        /*line-height: 30px;*/
        width: 298px;
        margin-top: 20px;
        transition: all 0.4s;
    }

    .advertisement:hover {
        box-shadow: 0px 5px 35px 3px #D1D1D1;


    }

    .newAritle {
        width: 298px;
        transition: all 0.4s;

    }

    .newAritle:hover {
        box-shadow: 0px 5px 35px 3px #D1D1D1;

    }

    .newlink {
        a {
            color: #40A1FF;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    }

    .newAritle {
        margin-top: 10px;
    }

    .guidang {
        width: 298px;
        margin-top: 10px;
        transition: all 0.4s;

        .riqi {
            a {
                color: #78B6F7;
                text-decoration: none;
            }
        }
    }

    .guidang:hover {
        box-shadow: 0px 5px 35px 3px #D1D1D1;

    }

    /*    字体设置*/
    .miaoshu {
        font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif', source-han-serif-sc, 'PT Serif', 'SongTi SC', 'MicroSoft Yahei', Georgia, serif;
        /*fons*/
        line-height: 21px;
        font-size: 13px;
        color: #6c757d;
    }
</style>